<template>
  <Echart class="leftCenter-content" :options="options" v-if="pageFlag"/>
  <reacquire v-else @click="getData"></reacquire>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules'
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      options:{}
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    initChart(data){
      const total = data.totalOfficeWaterConsume + data.totalWaterConsume + data.totalPowerConsume + data.totalOfficePowerConsume
      const color = ['#c76561','#dc9b42','#46a6ff','#4fb950']
      this.options={
        title:{
          text:['{total|'+total+'}','{sum|总数}'].join('\n'),
          textStyle:{
            color:'#fff',
            rich:{
              total:{
                fontSize:32
              },
              sum:{}
            },
          },
          left:'center',
          top:'center'
        },
        tooltip:{
          show:true,
          backgroundColor:'#00000088',
          borderColor:'#0072FF',
          textStyle:{
            color:'#fff'
          }
        },
        series:[
          {
            name:'能耗占比',
            type:'pie',
            color:color,
            data:[
              {
                name:'办公用水量',
                value:data.totalOfficeWaterConsume,
              },
              {
                name:'生产用水量',
                value:data.totalWaterConsume,
              },
              {
                name:'生产耗电量',
                value:data.totalPowerConsume,
              },
              {
                name:'办公耗电量',
                value:data.totalOfficePowerConsume,
              },
            ],
            radius:['42%','65%'],
            label:{
              color:'#fff',
              formatter:'{b|{b}}\n{c|{c}}\t\t{d|{d}%}',
              rich:{
                b:{},
                c:{
                  color:'#01AAFF'
                },
                d:{
                  color:'#01AAFF'
                }
              }
            }
          },
          {
            name:'能耗占比',
            type:'pie',
            color:color,
            data:[
              {
                name:'办公用水量',
                value:data.totalOfficeWaterConsume,
              },
              {
                name:'生产用水量',
                value:data.totalWaterConsume,
              },
              {
                name:'生产耗电量',
                value:data.totalPowerConsume,
              },
              {
                name:'办公耗电量',
                value:data.totalOfficePowerConsume,
              },
            ],
            radius:['42%','65%'],
            label:{
              color:'#fff',
              formatter:'{b|{b}}\n{c|{c}}\t\t{d|{d}%}',
              rich:{
                b:{},
                c:{
                },
                d:{
                }
              },
              width:0,
              height:0,
              backgroundColor:'auto',
              padding:[2.5,-2.5,2.5,-2.5],
              borderRadius:2.5
            }
          }
        ]
      }
    },
    getData(){
      currentGET('big2').then(res=>{
        if (res.success) {
          this.initChart(res.data[0])
          this.pageFlag = true
          this.switper()
        }else{
          this.pageFlag = false
        }
      })
    },
    switper(){
      if (this.timer) {
        return
      }
      this.timer= setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>
</style>